<template>
    <div style="margin: 10px;overflow: hidden">
        <Card>
            <p slot="title">
                查询
            </p>
            <div class="search-con search-con-top">
                <Select v-model="searchKey" class="search-col" >
                    <Option v-for="item in columns" v-if="item.key !== 'handle'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
                </Select>
                <Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue"/>
                <Button @click="handleSearch" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
            </div>
        </Card>
        <Card style="margin-top: 10px;">
            <ButtonGroup >
                <Button @click="addDict()">增加</Button>
                <Button @click="regDict()">修改</Button>
                <Button @click="deleteDict()">删除</Button>
            </ButtonGroup>
            <Table ref="dictTable"  style="margin-top: 10px;" :data="tableData1" :columns="tableColumns1" @on-select="getDictSelect" @on-select-cancel="cancelDictSelect" stripe>
                <template slot="expandRow" slot-scope="props">
                    <div style="padding:16px;">
                        <Row>
                            <Col span="8">
                                <span class="expand-key">text: </span>
                                <span class="expand-value">{{ props.row.text }}</span>
                            </Col>
                            <Col span="8">
                                <span class="expand-key">value: </span>
                                <span class="expand-value">{{ props.row.value }}</span>
                            </Col>
                            <Col span="8">
                                <span class="expand-key">type: </span>
                                <span class="expand-value">{{ props.row.type }}</span>
                            </Col>
                        </Row>
                    </div>
                </template>
                <template slot="action" slot-scope="props">
                    <Button :disabled="props.text=='text9'" type="primary" size="small" @click="clickRow(props.id)">启用</Button>
                    <Divider type="vertical" />
                    <Poptip confirm title="是否禁用前端加载当前数据?" transfer>
                        <Button type="warning" size="small" @click="clickRow(props.id)">禁用</Button>
                    </Poptip>
                </template>
            </Table>
            <Page style="margin-top: 5px;" show-elevator show-sizer show-total :total="total" :current="current" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"></Page>
        </Card>
        <addDict v-model="show" :id="id" ></addDict>
        <editDict v-model="editShow" :id="id"></editDict>
    </div>
</template>
<script>
    import addDict from './addDictVue';
    import editDict from './editDictVue';
    import { getDictList } from '../../api/dict';

    export default {
        components:{
            addDict,
            editDict
        },
        data () {
            return {
                total:50,
                current:2,
                pageSize:20,
                tableData1: [],
                searchKey:'',
                searchValue:'',
                columns:[{key:'code',title:'字典编码'}],
                show:false,
                editShow:false,
                id:'',
                tableColumns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'expand',
                        width: 50,
                        render: (h, params) => {
                            return h(
                                'div',
                                this.$refs.dictTable.$scopedSlots.expandRow({ row: params.row })
                            )
                        }
                    },
                    {
                        title: '流水号',
                        key: 'id'
                    },
                    {
                        title: '类型',
                        key: 'type'
                    },
                    {
                        title: '编码',
                        key: 'code'
                    },
                    {
                        title: '数值',
                        key: 'value'
                    },
                    {
                        title: '文本',
                        key: 'text'
                    },
                    {
                        key: 'action',
                        title: '操作',
                        align: 'center',
                        render: (h, params) => {
                            return h(
                                'div',
                                this.$refs.dictTable.$scopedSlots.action({ text: params.row.text,id:params.row.id })
                            )
                        }
                    }
                ]
            }
        },
        comments:{
            selection (){
                return [];
            }
        },
        mounted(){
            console.log("this.current"+this.current)
            this.init();
        },
        methods: {
            clickRow(id){
                console.log("rowValue="+id+"---"+this.show);
            },
            handleClear (e) {
                e.target.value === '';
                console.log("清空表单");
            },
            handleSearch () {
                let  current = this.current;
                let pageSize = this.pageSize;
                let searchKey = this.searchKey;
                let searchValue = this.searchValue;
                console.log(current+"----"+pageSize);
                const _this = this;
                getDictList({
                    current,
                    pageSize,
                    searchKey,
                    searchValue
                }).then(res => {
                    _this.total = res.total;
                    _this.tableData1 = res.list;
                    console.log("this.getDictList(this.current,this.pageSize).total==="+res.total);
                });
                console.log("查询数据");
            },
            init(){
                let  current = this.current;
                let pageSize = this.pageSize;
                console.log(current+"----"+pageSize);
                const _this = this;
                new Promise((resolve, reject) => {
                    getDictList({
                        current,
                        pageSize
                    }).then(res => {
                        _this.total = res.total;
                        _this.tableData1 = res.list;
                        console.log("this.getDictList(this.current,this.pageSize).total==="+res.total);
                    });
                });
            },
            getDictSelect(selection,row){
                this.selection = selection;
            },
            cancelDictSelect(selection,row){
                this.selection = selection;
            },
            addDict (status) {
                this.show = true;
                console.log("增加数据"+JSON.stringify(this.selection));
            },
            regDict(status){
                if(this.selection!=undefined){
                    this.editShow = true;
                    this.id = this.selection[0].id;
                }
                console.log("修改数据"+JSON.stringify(this.selection));
            },
            deleteDict(status){
                console.log("删除数据"+JSON.stringify(this.selection));
            },
            selectionClick(arr) {
                console.log('选中数据id数组:' + arr)
            },
            formatDate (date) {
                const y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            changePage (current) {
                this.current = current;
                this.init();
            },
            changePageSize(pageSize){// 改变每页记录的条数
                this.pageSize = pageSize;
                this.init();
            }
        }
    }
</script>
<style lang="less">
    @import './index.less';
</style>
